<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>Order</title>
  <link rel="StyleSheet" href="../css/account.css" type="text/css" media="screen" />
  <link rel="StyleSheet" href="../css/common.css" type="text/css" media="screen" />
  <script src="/js/jquery-3.6.0.min.js"></script>
</head>
<body>
<div th:replace="/common/top"></div>

  <div id="w">
    <div id="petName">Confirm Order</div>
<!--    <form action="/user/pay" method="get">-->
    <div id="orderContent">
      <div id="itemInfoContent">
        <table id="ItemOrderTable">
          <tr>
            <th colspan="3">commodity Information</th>
          </tr>
          <tr>
            <td class="itemOrderTableTitle">Item Id</td>
            <td class="itemOrderTableTitle">Quantity</td>
            <td class="itemOrderTableTitle">Total Price</td>
          </tr>
          <tr th:each="item:${lineItems}">
            <td class="itemOrderTableInfo">
              <span class="itemInfo" th:text="${item.itemid}" name="itemid">ItemId</span>
            </td>
            <td class="itemOrderTableInfo">
              <span class="itemInfo" th:text="${item.quantity}" name="quantity">x2</span>
            </td>
            <td class="itemOrderTableInfo">
              <span class="itemInfo" th:text="'$'+ ${item.unitprice * item.quantity}" name="totalprice">总价</span>
            </td>
          </tr>
        </table>
<!--        <div id="goods">commodity Information</div>-->
<!--&lt;!&ndash;        <span class="itemInfo" >图片</span>&ndash;&gt;-->
<!--&lt;!&ndash;        <span class="itemInfo" th:text="${item.productid}">productId</span>&ndash;&gt;-->
<!--        <div id="itemContent" th:each="item:${lineItems}">-->
<!--          <span class="itemInfo" th:text="${item.itemid}" name="itemid">ItemId</span>-->
<!--          <span class="itemInfo" th:text="${item.quantity}" name="quantity">x2</span>-->
<!--          <span class="itemInfo" th:text="'$'+ ${item.unitprice * item.quantity}" name="totalprice">总价</span>-->
<!--        </div>-->
      </div>

      <form action="/user/payForm" method="get">
        <div id="accountInfoContent">
          <table id="accountOrderTable">
            <tr>
              <th colspan="2">address Information</th>
            </tr>
            <tr>
              <td class="accountOrderTableTitle">收件人：</td>
              <td class="accountOrderTableInfo" th:text="${order.username !=null ? order.username : ''}" name="username">xxx</td>
            </tr>
  <!--          <tr>-->
  <!--            <td class="accountOrderTableTitle">联系电话：</td>-->
  <!--            <td class="accountOrderTableInfo" th:text="${order.}">11111111</td>-->
  <!--          </tr>-->
            <tr>
              <td class="accountOrderTableTitle">First name:</td>
              <td class="accountOrderTableInfo">
                <input class="accountInfoFix" th:value="${order.billtofirstname !=null ? order.billtofirstname : ''}" type="text" name="billtofirstname" />
              </td>
            </tr>
            <tr>
              <td class="accountOrderTableTitle">Last name:</td>
              <td class="accountOrderTableInfo">
                <input class="accountInfoFix" th:value="${order.billtolastname !=null ? order.billtolastname : ''}"  type="text" name="billtolastname" />
              </td>
            </tr>
            <tr>
              <td class="accountOrderTableTitle">Address 1:</td>
              <td class="accountOrderTableInfo">
                <input class="accountInfoFix" th:value="${order.billaddr1 !=null ? order.billaddr1 : ''}" type="text" name="billaddr1" />
              </td>
            </tr>
            <tr>
              <td class="accountOrderTableTitle">Address 2:</td>
              <td class="accountOrderTableInfo">
                <input class="accountInfoFix" th:value="${order.billaddr2 !=null ? order.billaddr2 : ''}"  type="text" name="billaddr2" />
              </td>
            </tr>
            <tr>
              <td class="accountOrderTableTitle">City:</td>
              <td class="accountOrderTableInfo">
                <input class="accountInfoFix" th:value="${order.billcity !=null ? order.billcity : ''}" type="text" name="billcity" />
              </td>
            </tr>
            <tr>
              <td class="accountOrderTableTitle">State:</td>
              <td class="accountOrderTableInfo">
                <input class="accountInfoFix" th:value="${order.billstate !=null ? order.billstate : ''}" type="text" name="billstate" />
              </td>
            </tr>
            <tr>
              <td class="accountOrderTableTitle">Zip:</td>
              <td class="accountOrderTableInfo">
                <input class="accountInfoFix" th:value="${order.billzip !=null ? order.billzip : ''}" type="text" name="billzip" />
              </td>
            </tr>
            <tr>
              <td class="accountOrderTableTitle">Country:</td>
              <td class="accountOrderTableInfo">
                <input class="accountInfoFix" th:value="${order.billcountry !=null ? order.billcountry : ''}" type="text" name="billcountry" />
              </td>
            </tr>
            <tr id="new">
              <td colspan="2">
                <label class="radio_label">
                  <input type="radio" name="status" id="ship" value="1" style="display: none;">点击添加收货地址
                </label>
              </td>
            </tr>
            <tr>
              <th colspan="2" id="shipAdd" style="display: none;">Shipping Address</th>
            </tr>
            <tr>
              <td class="accountOrderTableTitles">First name:</td>
              <td class="accountOrderTableInfos"><input th:value="${order.shiptofirstname !=null ? order.shiptofirstname : ''}" type="text" name="shiptofirstname"/></td>
            </tr>
            <tr>
              <td class="accountOrderTableTitles">Last name:</td>
              <td class="accountOrderTableInfos"><input th:value="${order.shiptolastname !=null ? order.shiptolastname : ''}" type="text" name="shiptolastname"/></td>
            </tr>
            <tr>
              <td class="accountOrderTableTitles">Address 1:</td>
              <td class="accountOrderTableInfos"><input th:value="${order.shipaddr1 !=null ? order.shipaddr1 : ''}" type="text" name="shipaddr1"/></td>
            </tr>
            <tr>
              <td class="accountOrderTableTitles">Address 2:</td>
              <td class="accountOrderTableInfos"><input th:value="${order.shipaddr2 !=null ? order.shipaddr2 : ''}" type="text" name="shipaddr2"/></td>
            </tr>
            <tr>
              <td class="accountOrderTableTitles">City:</td>
              <td class="accountOrderTableInfos"><input th:value="${order.shipcity !=null ? order.shipcity : ''}" type="text" name="shipcity"/></td>
            </tr>
            <tr>
              <td class="accountOrderTableTitles">State:</td>
              <td class="accountOrderTableInfos"><input th:value="${order.shipstate !=null ? order.shipstate : ''}" type="text" name="shipstate"/></td>
            </tr>
            <tr>
              <td class="accountOrderTableTitles">Zip:</td>
              <td class="accountOrderTableInfos"><input th:value="${order.shipzip !=null ? order.shipzip : ''}" type="text" name="shipzip"/></td>
            </tr>
            <tr>
              <td class="accountOrderTableTitles">Country:</td>
              <td class="accountOrderTableInfos"><input th:value="${order.shipcountry !=null ? order.shipcountry : ''}" type="text" name="shipcountry"/></td>
            </tr>
            <tr id="cancel" style="display: none;">
              <td colspan="2">
                <label class="radio_label">
                  <input type="radio" name="status" id="close" value="2" style="display: none;" checked> 取消新加收货地址
                </label>
              </td>
            </tr>
            <tr>
              <td class="accountOrderTableTitle">订单编号：</td>
              <td class="accountOrderTableInfo">
                <input th:value="${order.orderid}" name="orderid" readonly="readonly">
              </td>
<!--              <td class="accountOrderTableInfo"><input th:value="${order.orderid}" name="orderid" readonly="readonly"></td>-->
            </tr>
          </table>
        </div>
        <div id="submitOrder">
          <span>合计:$</span>
          <input id="total" th:value="${order.totalprice}" name="totalprice" readonly="readonly">
          <span>
<!--            <a href="/user/payForm" class="Button"> 确认订单，去付款</a>-->
            <input id="check" type="submit" class="Button" value="确认订单，去付款" onclick="check()">
          </span>
        </div>
      </form>
    </div>
  </div>
<div th:replace="/common/bottom"></div>
<script th:inline="javascript">
  var tableTitles = document.getElementsByClassName("accountOrderTableTitles");
  var tableInfos = document.getElementsByClassName("accountOrderTableInfos");
  var shipAdd = document.getElementById("shipAdd");
  var newElement = document.getElementById("new");
  var close = document.getElementById("cancel");

  $('#ship').on('click', function() {
    for (var i = 0; i < tableTitles.length; i++) {
      tableTitles[i].style.display = "table-cell";
    }
    for (var i = 0; i < tableInfos.length; i++) {
      tableInfos[i].style.display = "table-cell";
    }
    close.style.display = "";
    newElement.style.display = "none";
    shipAdd.style.display = "";
  });
  $('#close').on('click', function() {
    for (var i = 0; i < tableTitles.length; i++) {
      tableTitles[i].style.display = "none";
    }

    for (var i = 0; i < tableInfos.length; i++) {
      tableInfos[i].style.display = "none";
    }
    close.style.display = "none";
    newElement.style.display = "";
    shipAdd.style.display = "none";
  });
  $('#check').on('click', function(event) {
    event.preventDefault();

    var t = $('input:radio:checked').val();
    console.log(t);

    if(t == 2) {
      var inputs = document.querySelectorAll('#accountOrderTable input[class="accountInfoFix"]');
    }else if(t == 1){
      var inputs = document.querySelectorAll('#accountOrderTable input[type="text"]');
    }
    var isValid = true;

    for (var i = 0; i < inputs.length; i++) {
      if (inputs[i].value.trim() === '') {
        isValid = false;
        break;
      }
    }
    if (isValid) {
      document.querySelector('form').submit();
    } else {
      alert('请确保所有必填字段都不为空');
    }
  });
</script>
</body>
</html>